<template>
  <div>
    <el-button @click="comeback">返回</el-button>

    <input type="file" @change="handleFileUpload" />
    <div v-if="decodedText">
      解码结果:
      <p>{{ decodedText }}</p>
    </div>
  </div>
</template>
  
  <script>
import QrCode from "qrcode-reader";

export default {
  data() {
    return {
      decodedText: "",
    };
  },
  methods: {
    comeback(){
        this.$router.go(-1)
    },
    async decodeQRCode(imageData) {
      try {
        const qrCode = new QrCode();
        const result = await new Promise((resolve, reject) => {
          qrCode.callback = (error, value) => {
            if (error) {
              reject(error);
            } else {
              resolve(value.result);
            }
          };
          qrCode.decode(imageData);
        });
        return result;
      } catch (error) {
        console.error("Error decoding QR code:", error);
        return null;
      }
    },
    async handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = async () => {
          const imageData = reader.result;
          const decodedText = await this.decodeQRCode(imageData);
          if (decodedText) {
            this.decodedText = decodedText;
          } else {
            this.decodedText = "无法解码二维码。";
          }
        };
        reader.readAsDataURL(file);
      }
    },
  },
};
</script>
  